<script setup lang="ts" name="Remove">
import { reactive } from "vue";
interface FormState {
  email: string;
  type: string | undefined;
}

const formState = reactive<FormState>({
  email: "",
  type: "Email",
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
console.log(1234)
</script>

<template>
  <div class="remove">
    <div class="logo">
      <img src="@/assets/logo.png" alt="logo" />
    </div>
    <a-form
      :model="formState"
      name="basic"
      layout="vertical"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item label="Type" name="type" class="type-item">
        <a-select
          v-model:value="formState.type"
          placeholder="please select your zone"
          disabled
        >
          <a-select-option value="Phone">Phone</a-select-option>
          <a-select-option value="Email">Email</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        :label="formState.type"
        name="email"
        class="type-item"
        :rules="[{ required: true, message: 'Please input your email!' },
          { type: 'email', message: 'the input is not valid E-mail!' }
        ]"
      >
        <a-input v-model:value="formState.email" />
      </a-form-item>
      <a-button  html-type="submit">Confirm Account Deletion</a-button>
    </a-form>
  </div>
</template>

<style scoped>
.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./assets/bg.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
.logo {
  position: fixed;
  right: 40px;
  top: 40px;
  flex-shrink: 0;
}

.logo img{
  width: 80px;
}
form {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

label {
  margin-bottom: 5px;
}

button {
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  background: #ff3eab;
  color: #fff;
  border: none;
  margin: 20px 0;
}
.type-item{
  width:100%;
}
@media (max-width: 500px) {
  form{
    margin: 0 50px;
    overflow: auto;
    min-width: 250px;
  }
}
</style>
